<template>
	<yd-layout id='bdStudyStageDetailVideo' class=''>
		<div  class="header_children_100" ref='headerChildrenRef' @click='playVideo'>
				<div class="header_children_100_c">
					<div class="mengban" v-show="playBtn"></div>
					<div class="mengbanimg" v-show="playBtn" :style="mengBanImgStyle"></div>
					<img v-show='playBtn' src="../../../assets/playBtn.png" alt="" />
					<div class="h5_player">
						<!--:poster="videoDetail.title_img" -->
						<video id="test_video" 
							width="100%" 
							ref='videoRef' 
							height="30%" 
							x5-video-orientation="portraint"
							 webkit-playsinline="true"
							  playsinline="" x5-playsinline=""
							   x-webkit-airplay="allow" @pause="pauseVideo"
							    @playing='playIngVideo' :src="dataObj.url" preload="" class="content_video text_left" style="position: inherit;width:100%;">
						</video>
					</div>
				</div>
		</div>
		<div id='scroolId' ref='scroolRef' style="overflow: auto;">
			
			
			<div class="content">
				<div class="content_course">
					<div class="course_title">{{dataObj.title}}</div>
					<div class="course_num">{{dataObj.play_count}}人学习</div>
				</div>
				<div class="content_c" style="border-bottom: .2rem solid #FAFAFA ;">
					<div class="c_v_html"  v-html="dataObj.content"></div>
				</div>
				<div class="title_name border_b ">
					<div class="name">学员分享</div>
					<div class="label">收听课程后，写下你的心得与收获</div>
				</div>
				
				<yd-infinitescroll v-show='commentList.length>0' :callback="getCommetnList" ref="infinitescrollDemo">
					
					<StudentShareList :videoComment='videoComment' @zanClick='zanClick'  :audioType='false' slot="list" :dataList='commentList'></StudentShareList>

					<!--<div slot="list"  class="list" v-for="item in commentList">
						
						<img class="list_img" :src="item.avatar" alt="" />
						<div class="list_right">
							<div class="list_name">{{item.nick_name}}</div>
							<div class="list_time">{{item.newTime}}</div>
							<div class="list_label c_size_30_42">{{item.content}}</div>
						</div>
					</div>-->
						<!-- 数据全部加载完毕显示 -->
				    <span slot="doneTip">没有更多数据了~~</span>
				
				    <!-- 加载中提示，不指定，将显示默认加载中图标 -->
				    <!--<img slot="loadingTip" src="path/img/loading.svg"/>-->
				</yd-infinitescroll>
				<!--<div v-if='commentList.length==0' class="no_list">暂无内容</div>-->
				
				<NoList v-show='commentList.length==0' style='margin-bottom: 1rem;'>
					<img style="margin-top: .5rem;" slot='img' src="../../../assets/kong_2.png" alt="" />
				</NoList>
				<yd-backtop></yd-backtop>
			</div>
		</div>
		
		
		<div slot='bottom'>
			<div class="footer_btn">
				<div class="footer_btn_label" @click="goShare">写写学习收获~</div>
				<div class="footer_btn_right">
					<!--<div class="footer_pinlun" @click="lookMore">
						<img src="../../../assets/bd_img/pinlun.png" alt="" />
						<div class="footer_pinlun_label c_text_ellipsis_1">评价{{commentTotal/10000>1?parseInt(commentTotal/10000)+'万+':commentTotal}}</div>
					</div>-->
					<div class="footer_pinlun">
						<img @click="onLike('like/unlike')" v-if="liked" src="../../../assets/bd_img/zan.png" alt="" />
						<img @click="onLike('like/like')" v-else src="../../../assets/bd_img/zan_h.png" alt="" />
						<div class="footer_pinlun_label c_text_ellipsis_1" :style="{color: liked?'#DCBBC9':'#999999'}">喜欢{{likeCount/10000>1?parseInt(likeCount/10000)+'万+':likeCount}}</div>
					</div>
				</div>
			</div>
		</div>
		
		<yd-popup v-model="showWrite" position="bottom" height="3.82rem">
			<div  class='pop_share'>
				<div class="pop_header">
					<img @click="showWrite=false" class="pop_header_img" src="../../../assets/audioDetail_8.png" alt="" />
					<div class="pop_header_btn" @click="sendShare" :style="{color:(textareaVal+'').length>0?'#DCBBC9':'#999999'}">发送</div>
				</div>
				<div class="textarea">
					<textarea @blur="closeShare" placeholder="写写学习感悟~" v-model.trim="textareaVal" ref='textareaRef' maxlength="150" name="" rows="" cols=""></textarea>
					<div class="text_num">{{(textareaVal+'').length}}/150</div>
				</div>
        		<!--<yd-textarea  class="textarea"   placeholder="写写学习感悟~" maxlength="150"></yd-textarea>-->
			</div>
		</yd-popup>
		
	</yd-layout>
</template>

<script>
	var setTime = '';
	import StudentShareList from '../../../components/StudentShareList/StudentShareList.vue'
	import { Slider } from 'vant';
	import { InfiniteScroll } from 'vue-ydui/dist/lib.rem/infinitescroll';
	import {BackTop} from 'vue-ydui/dist/lib.rem/backtop';
	import {Popup} from 'vue-ydui/dist/lib.rem/popup';
	export default {
		components: {
			[StudentShareList.name]: StudentShareList,
			[Slider.name]:Slider,
			[InfiniteScroll.name]: InfiniteScroll,
			[BackTop.name]:BackTop,
			[Popup.name]: Popup,
		},
		data() {
			return {
				videoComment:true,
				playBtn: true,
				palyOpen: false,
				h5VideoFlg: false,
				mengBanImgStyle: {},
				
				palyVal:0,
				
				dataObj:{},
				commentList:[],
				commentTotal:0,
				liked:false,
				likeCount:0,
				mp3Play:true,
				audioAllTime:'00:00',//总时长
				audioPlayTime:'00:00',//播放时间
				palyTime:0,
				disabled:true,
				pageNum:1,
				oldCurrentTime:0,
				num:1,
				henxianNum:1,
				
				showWrite:false,
				textareaVal:'',
				palyTime:0,
				videoId:'',
			}
		},
		
		created() {
			
		},
		watch: {

		},
		computed: {
			
		},
		async mounted() {
			this.videoId = this.$route.query.id
//			if(this.$route.query.channel){
			let flg =await this.isActive()
//			}
			//课程详情
			if(flg){
				this.getCourse()
				//获取评论
				this.getCommetnList()
				this.$refs.scroolRef.addEventListener('scroll',this.handleScroll)
			}
				
		},
		//销毁时移除
		destroyed(){
			clearInterval(setTime)
		},
		//销毁
		beforeDestroy(){
			if(this.palyOpen&&setTime){
				clearInterval(setTime)
				setTime = ''
				this.$root.submitEvent({
					kind:200,
					lastFlg:true,
					position:this.palyTime,
				})
			}
		},
		methods: {
			//点赞
			zanClick(item) {
				console.log(item)
				let name = 'like/like'
				if(item.liked == 1) {
					name = 'like/unlike'
				}
				this.$root.ajax({
					name: name,
					loadingName: '请稍后...',
					params: {
						kind: 9,
						oid: item.id
					}
				}).then((d) => {
					if(item.liked == 1){
						item.liked = 0;
						item.like_count--
						
					}else{
						item.liked = 1;
						item.like_count++
					}
					console.log(item.liked)
					this.$set(this.commentList, item.index, item)
					console.log(this.commentList[item.index])
				})
			},
			
			closeShare(){
				setTimeout(function() {
					var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
					window.scrollTo(0, Math.max(scrollHeight - 0.01, 0));
				}, 150);
				setTimeout(()=>{
					this.showWrite=false
				},250)
			},
			sendShare(){
				if(this.textareaVal){
					this.$root.ajax({
						name: 'comment/doComment',
						params: {
							kind: 200,
							oid:this.$route.query.id,
							content:this.textareaVal,
						}
					}).then((d) => {
						this.showWrite=false;
		                this.textareaVal = ''
		                    	
		               	this.pageNum=1;
						this.commentList=[]
						this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.reInit');
						this.getCommetnList(true)
						
						this.$dialog.toast({
		                    mes: '评论成功',
		                    timeout: 1500,
		                    icon: 'success',
		                    callback: () => {
		                    	//这样写的好处是不用生成history
		                    	
		                    }
		                });
					})
				}else{
					this.$dialog.toast({
	                    mes: '请输入学习收获~',
	                    timeout: 1500,
	                });
				}
			},
			isActive(){
				return new Promise((resolve,reject)=>{
					this.$root.ajax({
						name:'bible/isActive',
						type:'get',
						closeAllLoading:true,
						params: {}
					}).then((d) => {
						if(d.data){
							resolve(true)
						}else{
							this.$router.push({
								name:'bd_index'
							})
						}
						
					})
				})
			},
			//播放
			playVideo(){
				if(!this.dataObj.unlock){
					this.$dialog.confirm({
	                    title: '温馨提示',
	                    mes: '本节课程尚未解锁，请先学习之前阶段的课程',
	                    opts: [
	                        {
	                            txt: '去学习',
	                            color: '#DCBBC9',
	                            callback: () => {
	                            	this.$router.push({
	                            		name:'bd_index'
	                            	})
	                            }
	                        }
	                    ]
	                });
					return 
				}else{
					this.$nextTick(() => {
						this.videoPlayFunc()
					})
				}	
			},
			videoPlayFunc() {
				var myVideo = this.$refs.videoRef;
				myVideo.play();
				this.playBtn = false
				this.palyOpen = true
				this.h5VideoFlg = true
			},
			pauseVideo() {
				this.palyOpen = false
				var myVideo = this.$refs.videoRef;
				this.$root.id = this.videoId
				
				if(setTime){
					clearInterval(setTime);
					this.palyTime = 0;
					setTime=''
				}
				if(myVideo){
					this.$root.submitEvent({
						kind:200,
						lastFlg:true,
						position:myVideo.currentTime
					})
				}
			},
			playIngVideo() {
				var myVideo = this.$refs.videoRef;
				myVideo.setAttribute('controls', 'controls')
				this.palyOpen = true
				this.palyTime = myVideo.currentTime;
				
				setTime=setInterval(()=>{
					this.palyTime++
				},1000)
				
				this.$root.id = this.videoId
				this.$root.uuid = (parseInt((parseInt(new Date()-0))/1000))+''+(this.$root.userInfo.me.id||0)
				this.$root.submitEvent({
					kind:200,
					position:myVideo.currentTime,
				})
			},
			//查看更多的评论
			lookMore(){
				this.$router.push({
					name:'bd_comment',
					query:{
						oid:this.$route.query.id
					}
				})
			},
			//点赞
			onLike(url){
				this.$root.ajax({
					name: url,
					closeAllLoading:true,
					params: {
						kind:200,
						oid:this.$route.query.id,
					}
				}).then((d) => {
					if(url=='like/like'){
						this.liked  = true 
						this.likeCount+=1
					}else{
						this.liked =false
						this.likeCount-=1
					}
				})
			},
			//课程详情
			getCourse() {
				this.$root.ajax({
					name: 'bible/course',
					type:'get',
					params: {
						id: this.$route.query.id
					}
				}).then((d) => {
					if(d.data.unlock){
						this.mengBanImgStyle = {
							background: `url(${d.data.title_img}) no-repeat`,
							backgroundSize: `100% 100%`,
						}
						this.dataObj=Object.assign({},this.dataObj,d.data)
						
						this.liked = d.data.liked==1?true:false
						this.likeCount = d.data.like_count
						document.title=d.data.level_name
						
						//分享
						if(this.$root.isWeiXin()){
							//分享
							let query = '';
							if(this.$root.config.channel){
							 	query = `params=channelDY2FGoldUrlStrDY${this.$route.name}FGkeyNumDY1FGparamsKey1DYidFGparamsVal1DY${this.dataObj.id}`
							}else{
							 	query = `params=channelDY2FGoldUrlStrDY${this.$route.name}FGkeyNumDY1FGparamsKey1DYidFGparamsVal1DY${this.dataObj.id}`
							}
							this.$root.wxShare({
								d:{title:this.dataObj.title,title_img:this.$root.config.shareImg},//分享对象，题目等{title:'',title_img:''}
								query: query,//参数
								desc:`${this.dataObj.play_count}次学习`//分享详情
							})
						}
					}else{
						this.$dialog.confirm({
		                    title: '温馨提示',
		                    mes: '未通过前面的课程测评，请完成测评后再学习后续课程',
		                    opts: [
		                        {
		                            txt: '我知道了',
		                            color: '#DCBBC9',
		                            callback: () => {
		                            	this.$router.push({
		                            		name:'bd_index'
		                            	})
		                            }
		                        }
		                    ]
		                });
					}
				})
			},
			handleScroll(height){
				
			},
			goShare(){
				this.showWrite = true
//				this.$router.push({
//					name:'bd_share',
//					query:{
//						oid:this.$route.query.id
//					}
//				})
			},
			//获取评论
			getCommetnList(flg){
				this.$root.ajax({
					name: 'comment/lst',
					type:'get',
					closeAllLoading:flg?true:false,
					params: {
						kind: 200,
						page:this.pageNum,
						count:10,
						oid:this.$route.query.id,
					}
				}).then((d) => {
					let date = new Date()
					for(let a = 0 ;a<d.data.comment_list.length;a++){
						//刚刚
						if(date-d.data.comment_list[a].create_time*1000<60*1000){  //60s
							d.data.comment_list[a].newTime = '刚刚'
						}else if(date-d.data.comment_list[a].create_time*1000<5*60*1000){ //5min
							d.data.comment_list[a].newTime = '5分钟之内'
						}else if(date-d.data.comment_list[a].create_time*1000<30*60*1000){ //30min
							d.data.comment_list[a].newTime = '30分钟之内'
						}else if(date-d.data.comment_list[a].create_time*1000<3*60*60*1000){ //3h
							d.data.comment_list[a].newTime = '3小时之内'
						}else if(date-d.data.comment_list[a].create_time*1000<24*60*60*1000){ //24
							d.data.comment_list[a].newTime = '24小时之内'
						}else {
							let plDate = new Date(d.data.comment_list[a].create_time*1000)
							let month = plDate.getMonth()
							let day = plDate.getDate()
							if(date.getFullYear() == plDate.getFullYear()){
								d.data.comment_list[a].newTime = (month+1 < 10 ? '0' + (month + 1) : (month + 1)) + '-' + (day < 10 ? '0' + day : day)
							}else{
								d.data.comment_list[a].newTime = plDate.getFullYear() + '-' + (month+1 < 10 ? '0' + (month + 1) : (month + 1)) + '-' + (day < 10 ? '0' + day : day) 
							}
						}
					}
					this.commentList = [...this.commentList, ...d.data.comment_list] ;
					console.log(this.commentList.length)
					this.commentTotal = d.data.comment_total 
					
                    if (this.commentList.length >= d.data.comment_total ) {
                        /* 所有数据加载完毕 */
                        this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                        return;
                    }

                    /* 单次请求数据完毕 */
                    this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');

                    this.pageNum++;
					
				})
			}
		}
	}
</script>

<style lang="scss">
	@import './studyStageDetailVideo.scss';
</style>